<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../c-asserts/mui/css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="../../c-asserts/sui/sui1.0.1.css" />
    <link rel="stylesheet" type="text/css" href="../../c-asserts/swiper/css/swiper.min.css" />
    <style type="text/css">
        .item-option{
            background-color:#ffffff;
            border-top:1px solid #CCCCCC;
            border-bottom:1px solid #CCCCCC;
            margin-bottom:10px;
        }

        .item-option:first-child{
            border-top:none;
        }

        .swiper-container{
            width:100%;
        }

        .swiper-slide img{
            width:100%;
        }
        .padding10px{
            padding:10px;
        }
        .title-item{
            padding:0 10px;
        }
        .option-txt{
            height:33px;
            line-height:33px;
        }
        .option-number{
            width:60px;
            color:#ff7720;
        }

        .mui-icon{
            color:#8f8f94;
        }

        .content-star-box{
            width:100px;
            background-color:#c4c2c2;
        }
        .content-redtoole{
            width:0;
            height:21px;
            background-color:#ff7720;
        }
        .content-star{
            width:100px;
            background-image:url(../../c-image/star.png);
            background-size:100% 100%;
            background-position:center center;
            background-repeat:no-repeat;
            height:21px;
        }
        .star-txt{
            height:21px;
            line-height:21px;
        }

        .title-item-name{
            margin-bottom:5px;
        }
        .color666{
            color:#666666;
        }
        .font14{
            font-size:14px;
        }
    </style>
</head>
<body>
    <div class="item-option">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <!--<div class="swiper-slide"><img src="../../c-image/typeimg.jpg"></div>-->
                <!--<div class="swiper-slide"><img src="../../c-image/typeimg.jpg"></div>-->
                <!--<div class="swiper-slide"><img src="../../c-image/typeimg.jpg"></div>-->
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="padding10px">
            <div class="sui-flex-row">
                <div class="option-txt option-number">￥ <span class="price">0</span></div>
                <div class="option-txt color666">已售 <span class="soldnum">0</span></div>
                <div class="sui-flex1"></div>
                <div><button class="mui-btn mui-btn-danger">立即组队</button></div>
            </div>
        </div>
    </div>
    <div class="item-option padding10px">
        <div class="sui-flex-row">
            <div class="sui-flex-row">
                <div class="star-txt color666">评分：</div>
                <div class="content-star-box">
                    <div class="content-redtoole"><div class="content-star"></div></div>
                </div>
            </div>
            <div class="sui-flex1"></div>
            <div class="star-txt color666">去评分<span class="mui-icon mui-icon-forward star-txt"></span></div>
        </div>
    </div>
    <div class="title-item color666">店铺</div>
    <div class="item-option padding10px sui-flex-row shop" data-id="">
        <div class="sui-flex1">
            <div class="color666 title-item-name"></div>
            <div class="color666 shopweizhi"></div>
        </div>
        <div><a class="tel" tel=""><img width="45" height="45" src="../../image/tel.png"/></a></div>
    </div>
</body>
<script type="text/javascript" src="../../c-script/api.js"></script>
<script type="text/javascript" src="../../c-script/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="../../c-script/public.js"></script>
<script type="text/javascript" src="../../c-asserts/swiper/js/swiper.min.js"></script>
<script type="text/javascript" >

    var themeinfo,

    //入口
   $(document).ready(function(){
        api.showProgress();
        save(api.pageParam.id);
    };

    //post请求数据
    function save(themeid){
        myPostAjax('theme/getById.json',{themeid:themeid},function(ret,err){
            if(ret) themeinfo  = ret ;
            setting();  settext();
        })
    }

    //渲染轮播
    function setting(){
        var photolis = themeinfo.photo;
        var slidehtml = '';
        for(var i=0; i<photolis.length;i++)
            slidehtml += '<div class="swiper-slide"><img src="'+photolis[i]+'"></div>';
        $('.swiper-wrapper').html(slidehtml);

        var mySwiper = new Swiper('.swiper-container',{
            pagination : '.swiper-pagination',
            loop:true,
            autoplay : 5000
        });
        api.hideProgress();
    }

    function settext(){
        $('.price').html(themeinfo.price);
        $('.soldnum').html(themeinfo.soldnum);
        $('.title-item-name').html('名称：' + themeinfo.shopname);
        $('.shopweizhi').html('地址：' + themeinfo.area+themeinfo.street);
        $('.content-redtoole').width(themeinfo.evalstar*20+'px');
        $('.tel').attr('tel',themeinfo.phone);
        $('.shop').attr('data-id',themeinfo.phone);
    }
</script>
</html>